<template>
    <div class="el-inhead">
        <div class="el-inhead-logo" @click="turnBack">
            分拣配送系统
        </div>
        <div class="el-inhead-right">
            <div class="el-inhead-ibox">
                <img class="el-inhead-person" src="@/assets/personal.png" alt="" @click="loginMenuBtn">
                <div class="el-login-menu" >
                    <div @click="openDialog" >修改密码</div> 
                    <div @click="LogOut" style="margin-top: 10px;">退出登录</div>
                    
                    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                        <el-form ref="form" :model="form" label-width="120px">
                            <el-form-item label="原始密码：">
                                <el-input v-model="form.oldPwd" placeholder="请输入原始密码"></el-input>
                            </el-form-item>
                            <el-form-item label="修改后密码：">
                                <el-input v-model="form.newPwd" placeholder="请输入修改后密码"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="handleClose">取 消</el-button>
                            <el-button type="primary" @click="changePassword">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </div>
            <div class="el-inhead-name">
                <p>{{userName}}{{userJobNum}}<span style="margin-left:10px">单位：{{userUnits}}</span></p>
            </div>
            <div class="el-inhead-xbox">
                <img class="el-inhead-xing" src="@/assets/xingxing.png" alt="" >
            </div>
            <div class="el-inhead-neibu">
                <p>内部</p>
            </div>
        </div>
    </div>
</template>
<script>
import request from "@/utils/request.js";
export default {
    name:'InnerHead',
    data(){
        return{
            dialogVisible:false,
            userUnits:'',
            userName:'',
            userJobNum:'',
            isOut:false,
            form:{
                oldPwd:"",
                newPwd:""
            }
        }
    },
    methods:{
        handleClose(){
            this.form.newPwd = "";
            this.form.oldPwd = "";
            this.dialogVisible = false;
            document.querySelector('.el-login-menu').style.display = 'none'
        },
        openDialog(){
            this.dialogVisible = true;
        },
        turnBack(){
            this.$router.push('/menu')
        },
        // 图标点击事件
        loginMenuBtn(){
            if(this.isOut){
                document.querySelector('.el-login-menu').style.display = 'none'
                this.isOut = false
            }else {
                document.querySelector('.el-login-menu').style.display = 'inline'
                this.isOut = true
            }
            
        },
        // 修改密码(重置密码)
        changePassword(){
            
            this.dialogVisible = false;
            request.post("/admin/changePassword",this.form).then((res)=>{
            console.log("res",res);
            if(res.data.retCode=='200'){
                    this.$Alert({
                    title: "成功",message: res.data.message,type: "success"
                    })
                    sessionStorage.clear()
                    document.querySelector('.el-login-menu').style.display = 'none'
                    this.$router.push('/')
                }else{
                    this.$Alert({
                    title: "失败",message: res.data.message,type: "error"
                    })
                    sessionStorage.clear()
                    document.querySelector('.el-login-menu').style.display = 'none'
                    this.$router.push('/')
                }
            }); 
        },
        // 退出登录
        LogOut(){
            sessionStorage.clear()
            document.querySelector('.el-login-menu').style.display = 'none'
            this.$router.push('/')
        }
    },
    mounted(){
        this.userName = sessionStorage.getItem("userName")
        this.userJobNum = sessionStorage.getItem("userJobNumber")
        this.userUnits = sessionStorage.getItem("userUnits")
    }
}
</script>
<style scoped>
.el-inhead {
    height: 100%;
}
.el-inhead-logo {
    float: left;
    margin-top: 10px;
    color: white;
    font-size: 24px;
    margin-left: 20px;
    cursor: pointer;
}
.el-inhead-right {
    float: right;
    display: flex;
    align-items: center;
    margin-top: 18px;
}
.el-inhead-ibox {
    position: relative;
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50px;
    padding: 2px;
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}
.el-login-menu {
    width: 100px;
    height: 60px;
    font-size: 1.2em;
    position: absolute;
    right: -34px;
    top: 21px;
    background-color: rgb(122, 122, 126);
    cursor: pointer;
    display: none;
    padding: 10px;
    border-radius: 10px;
    color: white;
}
.el-login-menu div:hover {
    color: rgb(122, 122, 126);
    background-color: white;
}
.el-inhead-name {
    margin-right: 30px;
}
.el-inhead-person {
    width: 20px;
    height: 20px;
    margin-top: 1.5px;
}
.el-inhead-xing {
    width: 20px;
    height: 20px;
    margin-top: 3px;
}
.el-inhead-neibu {
    line-height: 20px;
    margin-right: 30px;
}
</style>